<template>
    <el-dialog v-model="drawer" title="选择企业" :append-to-body="true" center :close-on-click-modal="false" :show-close="false" :close-on-press-escape="false" width="400px" @close="close">
        <el-radio-group v-model="index" class="ml-4" @change="selectIndex">
            <el-radio v-for="item in list" :label="item.id" size="large">{{ item.name }}</el-radio>
        </el-radio-group>
        <template #footer>
            <span class="dialog-footer">
                <el-button type="primary" @click="submitForm">确定</el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script>
import { computed, reactive, ref, toRefs, watch } from 'vue'
import { ElMessage } from 'element-plus'
import api from '/@/api/commonApi'

export default {
    name: 'ActiveService',
    props: {
        dialogDrawer: {
            type: Boolean,
            default: false
        },
        editForm: {
            type: Object,
            default() {
                return {}
            }
        },
        allEnterprise: {
            type: Array,
            default() {
                return []
            }
        }
    },
    emits: ['onSubmit', 'update:dialogDrawer'],
    setup(props, context) {
        const { dialogDrawer, allEnterprise, } = toRefs(props)
        const drawer = computed({
            get: () => dialogDrawer.value,
            set: val => {
                context.emit('update:dialogDrawer', val)
            }
        })
        const ruleRefForm = ref()
        const state = reactive({
            index: "0",
            list: [],
            rules: {},
            serviceList: [],
            activeManageList: [],
        })
        watch(() => dialogDrawer.value,
            val => {
                if(val) {
                    if (ruleRefForm.value) {
                        ruleRefForm.value.resetFields()
                    }
                    if(val == true){
                        let ids = []
                        allEnterprise.value.forEach(item => {
                            ids.push(item.id)
                        });
                        api.getEnterprises({ids: ids + ''}).then(res => {
                            console.log(res);
                            state.list = res.data
                        })
                    }
                }
            }
        )
        const submitForm = formEl => {
            context.emit('onSubmit', state.index)
            close()
        }
        const cancelForm = formEl => {
            if (!formEl) return
            formEl.resetFields()
            close()
        }
        const close = () => {
            context.emit('update:dialogDrawer', false)
        }
        const selectIndex = (val) => {
            console.log(val);
        }


        return {
            ...toRefs(state),
            drawer,
            submitForm,
            close,
            selectIndex,
        }
    }
}
</script>

<style lang="scss" scoped>
.el-form-item{
    align-items: start;
    flex: 1;
}
</style>